<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>XHR解密工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
    <script src="crypto-js.min.js"></script>
    <script src="json5.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background: #1e1e1e;
            color: #d4d4d4;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #3c3c3c;
        }

        .header-controls {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .config-info {
            font-size: 12px;
            color: #9cdcfe;
            background: #2d2d2d;
            padding: 6px 12px;
            border-radius: 4px;
            border: 1px solid #3c3c3c;
            max-width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        h1 {
            color: #569cd6;
            margin: 0;
            font-size: 24px;
            text-shadow: 0 0 10px rgba(86, 156, 214, 0.3);
        }

        .clear-btn {
            background: #d73a49;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .clear-btn:hover {
            background: #b60233;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(215, 58, 73, 0.3);
        }

        .xhr-list {
            max-height: 85vh;
            overflow-y: auto;
            font-size: 13px;
            padding-right: 10px;
        }

        .xhr-list::-webkit-scrollbar {
            width: 8px;
        }

        .xhr-list::-webkit-scrollbar-track {
            background: #2d2d2d;
            border-radius: 4px;
        }

        .xhr-list::-webkit-scrollbar-thumb {
            background: #569cd6;
            border-radius: 4px;
        }

        .xhr-list::-webkit-scrollbar-thumb:hover {
            background: #4ec9b0;
        }

        /* 全局滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #2d2d2d;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: #569cd6;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #4ec9b0;
        }

        ::-webkit-scrollbar-corner {
            background: #2d2d2d;
        }

        .xhr-item {
            margin-bottom: 20px;
            border: 1px solid #3c3c3c;
            border-radius: 8px;
            padding: 15px;
            background: #252526;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        .xhr-item:hover {
            border-color: #569cd6;
            box-shadow: 0 4px 12px rgba(86, 156, 214, 0.2);
        }

        .xhr-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #3c3c3c;
        }

        .xhr-header.clickable {
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .xhr-header.clickable:hover {
            background-color: #2d2d2d;
            border-radius: 4px;
            padding: 10px;
            margin: -10px -10px 10px -10px;
        }

        .expand-icon {
            color: #569cd6;
            font-size: 12px;
            margin-left: 10px;
            transition: transform 0.2s ease;
        }

        .details-container {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #3c3c3c;
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .method {
            background: #569cd6;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: bold;
            font-size: 11px;
            margin-right: 10px;
            text-transform: uppercase;
        }

        .url {
            color: #4ec9b0;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 12px;
            flex: 1;
            word-break: break-all;
        }

        .time-info {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            margin-left: 10px;
            min-width: 80px;
        }

        .time {
            color: #9cdcfe;
            font-size: 11px;
            line-height: 1.2;
        }

        .duration {
            color: #4ec9b0;
            font-size: 10px;
            font-weight: bold;
            line-height: 1.2;
        }

        details {
            margin: 10px 0;
        }

        summary {
            color: #dcdcaa;
            cursor: pointer;
            padding: 8px 12px;
            background: #2d2d2d;
            border-radius: 4px;
            font-weight: bold;
            transition: background 0.2s ease;
        }

        summary:hover {
            background: #3c3c3c;
        }

        summary::-webkit-details-marker {
            color: #569cd6;
        }

        pre {
            background: #1e1e1e !important;
            border: 1px solid #3c3c3c !important;
            border-radius: 4px !important;
            padding: 12px !important;
            margin: 8px 0 !important;
            overflow-x: auto !important;
            font-family: 'Consolas', 'Monaco', monospace !important;
            font-size: 12px !important;
            line-height: 1.4 !important;
        }

        .decrypted-data {
            border-left: 3px solid #4ec9b0 !important;
        }

        .decrypted-request-data {
            border-left: 3px solid #4ec9b0 !important;
        }

        .request-data {
            border-left: 3px solid #569cd6 !important;
        }

        .response-data {
            border-left: 3px solid #dcdcaa !important;
        }

        .no-data {
            color: #6a9955;
            font-style: italic;
        }

        .status-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .status-success {
            background: #4ec9b0;
        }

        .status-error {
            background: #f44747;
        }

        .status-warning {
            background: #dcdcaa;
        }

        .code-container {
            position: relative;
        }

        .copy-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            background: #569cd6;
            color: white;
            border: none;
            padding: 6px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            font-weight: bold;
            opacity: 0;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .code-container:hover .copy-btn {
            opacity: 1;
        }

        .copy-btn:hover {
            background: #4ec9b0;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        .copy-btn.copied {
            background: #4ec9b0;
            animation: pulse 0.3s ease;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        .copy-notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 20px;
            border-radius: 6px;
            font-weight: bold;
            z-index: 10000;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            animation: slideIn 0.3s ease;
        }

        .copy-notification.success {
            background: #4ec9b0;
            color: white;
        }

        .copy-notification.error {
            background: #f44747;
            color: white;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }

            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }

        .decrypt-controls {
            margin-bottom: 15px;
            padding: 10px;
            background: #2d2d2d;
            border-radius: 6px;
            border: 1px solid #3c3c3c;
        }

        .data-comparison {
            display: flex;
            gap: 15px;
            margin: 10px 0;
        }

        .data-column {
            flex: 1;
            min-width: 0;
        }

        .data-label {
            color: #569cd6;
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 8px;
            padding: 4px 8px;
            background: #2d2d2d;
            border-radius: 4px;
            text-align: center;
        }

        .decrypt-btn {
            background: #569cd6;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .decrypt-btn:hover {
            background: #4ec9b0;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        .decrypt-btn:disabled {
            cursor: not-allowed;
            opacity: 0.7;
        }

        .info-container {
            background: #2d2d2d;
            border-radius: 6px;
            padding: 15px;
            margin: 10px 0;
            border: 1px solid #3c3c3c;
        }

        .info-item {
            margin: 8px 0;
            color: #d4d4d4;
            font-size: 13px;
        }

        .info-item strong {
            color: #569cd6;
            margin-right: 8px;
        }

        /* 标签页样式 */
        .tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #3c3c3c;
        }

        .tab {
            background: #2d2d2d;
            color: #d4d4d4;
            border: none;
            padding: 12px 24px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            border-radius: 6px 6px 0 0;
            margin-right: 5px;
            transition: all 0.3s ease;
        }

        .tab.active {
            background: #569cd6;
            color: white;
        }

        .tab:hover {
            background: #4ec9b0;
            color: white;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* 请求发送器样式 */
        .request-sender {
            background: #252526;
            border: 1px solid #3c3c3c;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .request-form {
            display: grid;
            gap: 15px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .form-group label {
            color: #569cd6;
            font-weight: bold;
            font-size: 14px;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            background: #2d2d2d;
            border: 1px solid #3c3c3c;
            color: #d4d4d4;
            padding: 10px;
            border-radius: 4px;
            font-size: 13px;
            font-family: 'Consolas', 'Monaco', monospace;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #569cd6;
            box-shadow: 0 0 0 2px rgba(86, 156, 214, 0.2);
        }

        .method-url-group {
            display: flex;
            gap: 10px;
            align-items: end;
        }

        .method-select {
            width: 100px;
        }

        .url-input {
            flex: 1;
        }

        .headers-section {
            background: #2d2d2d;
            border-radius: 6px;
            padding: 15px;
            border: 1px solid #3c3c3c;
        }

        .headers-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .header-item {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .header-item input {
            flex: 1;
        }

        .add-header-btn,
        .remove-header-btn {
            background: #569cd6;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s ease;
        }

        .add-header-btn:hover {
            background: #4ec9b0;
        }

        .remove-header-btn {
            background: #d73a49;
        }

        .remove-header-btn:hover {
            background: #b60233;
        }

        .send-btn {
            background: #28a745;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .send-btn:hover {
            background: #218838;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
        }

        .send-btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .response-section {
            margin-top: 20px;
            background: #2d2d2d;
            border-radius: 6px;
            padding: 15px;
            border: 1px solid #3c3c3c;
        }

        .response-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .response-status {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }

        .status-success {
            background: #28a745;
            color: white;
        }

        .status-error {
            background: #d73a49;
            color: white;
        }

        .response-time {
            color: #9cdcfe;
            font-size: 12px;
        }

        .response-content {
            background: #1e1e1e;
            border: 1px solid #3c3c3c;
            border-radius: 4px;
            padding: 15px;
            max-height: 400px;
            overflow-y: auto;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 12px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .loading {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #569cd6;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .history-item {
            background: #2d2d2d;
            border: 1px solid #3c3c3c;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .history-item:hover {
            background: #3c3c3c;
            border-color: #569cd6;
        }

        .history-method {
            color: #569cd6;
            font-weight: bold;
            margin-right: 10px;
        }

        .history-url {
            color: #d4d4d4;
            font-size: 13px;
        }

        .history-time {
            color: #9cdcfe;
            font-size: 11px;
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div class="header">
        <h1>🔓 XHR解密工具</h1>
        <div class="header-controls">
            <div id="configInfo" class="config-info"></div>
            <button id="clearBtn" class="clear-btn">🗑️ 清屏</button>
        </div>
    </div>

    <div class="tabs">
        <button class="tab active" data-tab="decrypt">🔓 解密工具</button>
        <button class="tab" data-tab="sender">📡 请求发送器</button>
    </div>

    <div id="decryptTab" class="tab-content active">
        <div class="xhr-list" id="xhrList"></div>
    </div>

    <div id="senderTab" class="tab-content">
        <div class="request-sender">
            <form class="request-form" id="requestForm">
                <div class="method-url-group">
                    <select class="method-select" id="methodSelect">
                        <option value="GET">GET</option>
                        <option value="POST">POST</option>
                        <option value="PUT">PUT</option>
                        <option value="DELETE">DELETE</option>
                        <option value="PATCH">PATCH</option>
                    </select>
                    <input type="url" class="url-input" id="urlInput" placeholder="请输入请求URL" required>
                </div>

                <div class="headers-section">
                    <h3 style="margin: 0 0 15px 0; color: #569cd6;">请求头</h3>
                    <div class="headers-list" id="headersList">
                        <div class="header-item">
                            <input type="text" placeholder="Header名称" class="header-name" value="Content-Type">
                            <input type="text" placeholder="Header值" class="header-value" value="application/json">
                            <button type="button" class="remove-header-btn">删除</button>
                        </div>
                    </div>
                    <button type="button" class="add-header-btn" id="addHeaderBtn">+ 添加请求头</button>
                </div>

                <div class="form-group">
                    <label for="bodyInput">请求体 (JSON)</label>
                    <textarea id="bodyInput" rows="8" placeholder='{"key": "value"}'></textarea>
                </div>

                <div style="display: flex; gap: 10px; margin-bottom: 15px;">
                    <button type="button" class="add-header-btn" id="fillFromRequestBtn">📋 从现有请求填充</button>
                    <button type="button" class="add-header-btn" id="clearFormBtn">🗑️ 清空表单</button>
                </div>

                <button type="submit" class="send-btn" id="sendBtn">🚀 发送请求</button>
            </form>

            <div class="response-section" id="responseSection" style="display: none;">
                <div class="response-header">
                    <div>
                        <span class="response-status" id="responseStatus"></span>
                        <span class="response-time" id="responseTime"></span>
                    </div>
                    <button class="copy-btn" id="copyResponseBtn">复制响应</button>
                </div>
                <div class="response-content" id="responseContent"></div>
            </div>
        </div>

        <div class="history-section">
            <h3 style="color: #569cd6; margin-bottom: 15px;">请求历史</h3>
            <div id="requestHistory"></div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <script src="panel.js"></script>
</body>

</html>